<template>
	<view class="parent-box">
		<u-navbar title="个人中心" @rightClick="rightClick" :autoBack="true" height="44px" bgColor="#053E80"
			leftIconColor="#fff" titleStyle="#fff">
			<view slot="center" style="color: #fff;">{{getTitle}}</view>
			<!-- <view slot="right" style="color: #fff;">

				<u-icon name="more-dot-fill" color="#fff" size="28" style="transform: rotate(90deg);"></u-icon>
			</view> -->
		</u-navbar>
		<view class="tab-box" style="margin-top: 44px;">
			<text :class="['tab',activeIndex==0?'active':'']" @click="changeTab(0)">地图显示</text>
			<text :class="['tab',activeIndex==1?'active':'']" @click="changeTab(1)">全部客户</text>
		</view>
		<view class="content-box">

			<YxMap v-show="activeIndex==0" :type="type" ref="mapRef" :currentTime="currentTime"></YxMap>
			<CustomerList v-show="activeIndex==1" :type="type" ref="customerListRef"></CustomerList>

		</view>
	</view>
</template>

<script>
	import YxMap from "../components/yxMap.vue"
	import CustomerList from "../components/customerList.vue"
	export default {
		components: {
			YxMap,
			CustomerList
		},
		data() {
			return {
				activeIndex: 0,
				type: null,

			}
		},
		computed: {
			currentTime: function() {
				return new Date().getTime()
			},
			getTitle: function() {
				// 1存款 2贷款 3支付结算 4代理业务 5中间及扩展业务 goodStart代表的是开门红 
				if (this.type == '1') {
					return '存款客户'
				} else if (this.type == '2') {
					return '贷款客户'
				} else if (this.type == '3') {
					return '支付结算客户'
				} else if (this.type == '4') {
					return '代理业务客户'
				} else if (this.type == '5') {
					return '中间及扩展业务客户'
				} else if (this.type == 'goodStart') {
					return '开门红客户'
				}
			}
		},
		onLoad(option) {
			this.type = option.type
			// this.$nextTick(() => {
			// 	this.$refs.mapRef.intMapLoad()
			// })
		},
		onShow() {
			this.$nextTick(() => {
				this.$refs.customerListRef.refreshData()
			})

		},
		methods: {
			changeTab(index) {
				this.activeIndex = index
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
	}

	.parent-box {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.tab-box {
		border-bottom: 4rpx solid #D2D2D2;
		margin-top: 20rpx;

		.tab {
			display: inline-block;
			padding: 16rpx 12rpx;
			margin: 0 10rpx;
			font-size: 28rpx;
			// font-weight: 600;

			&.active {
				border-bottom: 6rpx solid #0C7AF7;
			}
		}
	}

	.content-box {
		flex: 1;
	}
</style>